<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-back" @click="goBack">←</view>
			<view class="nav-title">立即预约</view>
			<view class="nav-actions">···</view>
		</view>

		<!-- 维修方式选择 -->
		<view class="FS">
			<view class="FS-title">维修方式</view>
			<radio-group class="radio-group">
				<label class="radio-item">
					<radio checked="currentTab === 1" color="#1E88E5" @click="currentTab = 0" />到店维修
				</label>
				<label class="radio-item">
					<radio  color="#1E88E5" @click="currentTab = 1" />上门取车
				</label>
			</radio-group>
		</view>

		<!-- 客户信息1（仅到店维修时显示） -->
		<view class="section" v-if="currentTab !== 1">
			<view class="section-title">客户信息</view>
			<view class="form-item">
				<view class="form-label">车主姓名</view>
				<input class="form-input" type="text" placeholder="请输入车主姓名" v-model="customerInfo.name" />
			</view>
			<view class="form-item">
				<view class="form-label">联系方式</view>
				<input class="form-input" type="text" placeholder="请输入联系方式" v-model="customerInfo.phone" />
			</view>
			<view class="form-item">
				<view class="form-label">预约时间</view>
				<input class="form-input" type="text" placeholder="请输入预约时间" v-model="customerInfo.time" />
			</view>
		</view>

		<!-- 客户信息2（仅上门取车时显示） -->
		<view class="section" v-if="currentTab === 1">
			<view class="section-title">客户信息</view>
			<view class="form-item">
				<view class="form-label">车主姓名</view>
				<input class="form-input" type="text" placeholder="请输入车主姓名" v-model="customerInfo.name" />
			</view>
			<view class="form-item">
				<view class="form-label">联系方式</view>
				<input class="form-input" type="text" placeholder="请输入联系方式" v-model="customerInfo.phone" />
			</view>
			<view class="form-item">
				<view class="form-label">预约时间</view>
				<input class="form-input" type="text" placeholder="请输入预约时间" v-model="customerInfo.time" />
			</view>
			<!-- 取车位置（仅上门取车时显示） -->
			<view class="form-item">
				<view class="form-label">取车位置</view>
				<input class="form-input" type="text" placeholder="请输入取车位置" v-model="customerInfo.pickupLocation" />
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="section">
			<view class="section-title">车辆信息</view>
			<view class="form-item">
				<view class="form-label">车辆类型</view>
				<view class="select-wrapper" @click="showCarTypePopup = true">
					<input class="form-input" type="text" placeholder="请选择" :value="selectedCarType" disabled />
					<view class="select-arrow">▼</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">车牌号</view>
				<input class="form-input" type="text" placeholder="请输入车牌号" v-model="carInfo.plateNumber" />
			</view>
		</view>

		<!-- 照片上传 -->
		<view class="section">
			<view class="section-title">照片</view>
			<view class="upload-section">
				<view class="upload-label">整车照片:</view>
				<view class="upload-box" @click="uploadCarImage">
					<text class="upload-icon">+</text>
					<text class="upload-text">上传照片</text>
				</view>
			</view>
			<view class="upload-section">
				<view class="upload-label">维修部位照片:</view>
				<view class="upload-box" @click="uploadPartImage">
					<text class="upload-icon">+</text>
					<text class="upload-text">上传照片</text>
				</view>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-button" @click="submitBooking">提交</view>

		<!-- 车辆类型选择弹窗 -->
		<uni-popup ref="carTypePopupRef" type="bottom">
			<view class="popup-content">
				<view class="popup-header">
					<view class="popup-title">请选择车辆类型</view>
					<view class="popup-close" @click="showCarTypePopup = false">✕</view>
				</view>
				<view class="popup-body">
					<view class="car-type-item" v-for="type in carTypes" :key="type" @click="selectCarType(type)">
						{{ type }}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	watch,
	onMounted
} from 'vue';

// 响应式数据
const repairMethod = ref('shop'); // 默认到店维修
const customerInfo = reactive({
	name: '',
	phone: '',
	time: '',
	pickupLocation: ''
});
const carInfo = reactive({
	carType: '',
	plateNumber: ''
});
const carTypes = ['宝马', '路虎', '大众', '奔驰', '别克', '比亚迪'];
const selectedCarType = ref('');
const showCarTypePopup = ref(false);
const carTypePopupRef = ref(null);
const currentTab = ref(2);
const statusBarHeight = ref(0);

// 方法定义
function goBack() {
	uni.navigateBack();
}

function uploadCarImage() {
	// 上传整车照片
	uni.chooseImage({
		count: 1,
		success: (res) => {
			// 这里可以处理上传逻辑
			uni.showToast({
				title: '整车照片已选择',
				icon: 'success'
			});
		}
	});
}

function uploadPartImage() {
	// 上传维修部位照片
	uni.chooseImage({
		count: 3,
		success: (res) => {
			// 这里可以处理上传逻辑
			uni.showToast({
				title: '维修部位照片已选择',
				icon: 'success'
			});
		}
	});
}

function selectCarType(type) {
	selectedCarType.value = type;
	carInfo.carType = type;
	showCarTypePopup.value = false;
}

function submitBooking() {
	// 表单验证
	if (!customerInfo.name || !customerInfo.phone || !customerInfo.time) {
		uni.showToast({
			title: '请填写完整客户信息',
			icon: 'none'
		});
		return;
	}

	if (!carInfo.carType || !carInfo.plateNumber) {
		uni.showToast({
			title: '请填写完整车辆信息',
			icon: 'none'
		});
		return;
	}

	// 提交预约，跳转到成功页面
	uni.navigateTo({
		url: '../bookingSuccess/bookingSuccess'
	});
}

// 监听showCarTypePopup变化
watch(showCarTypePopup, (val) => {
	if (val && carTypePopupRef.value) {
		carTypePopupRef.value.open();
	} else if (carTypePopupRef.value) {
		carTypePopupRef.value.close();
	}
});
onMounted(() => {
	// 获取状态栏高度，使用推荐的wx.getWindowInfo API
	try {
		const windowInfo = uni.getWindowInfo();
		statusBarHeight.value = windowInfo.statusBarHeight;
	} catch (error) {
		console.error('获取窗口信息失败:', error);
		statusBarHeight.value = 0;
	}
});
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.nav-bar {
	height: 88rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #1E88E5;
	color: white;
	padding:0 16px;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-back {
	font-size: 20px;
}

.nav-title {
	font-size: 18px;
	font-weight: bold;
}

.FS {
	background-color: white;
	margin: 10px;
	border-radius: 30rpx;
	padding: 16px;
	display: flex;
	justify-content: space-between;
}

.FS-title {
	font-weight: bold;
}

.section {
	background-color: white;
	padding: 16px;
	margin: 10px;
	border-radius: 30rpx;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 16px;
	padding-bottom: 16rpx;
	border-bottom: 8rpx #eee solid;
}

.radio-group {
	display: flex;
	gap: 30px;
}

.radio-item {
	display: flex;
	align-items: center;
	font-size: 15px;
}

.radio-item radio {
	margin-right: 5px;
}

.form-item {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.form-label {
	width: 120rpx;
	text-align: center;
	padding: 20rpx;
	background-color: #4DA6FF;
	color: #fff;
	border-radius: 30px;
	font-size: 28rpx;
	margin-right: 20rpx;
}

.form-input {
	flex: 1;
	padding: 10px 20px;
	border: 1px solid #e0e0e0;
	border-radius: 30px;
	background-color: #f9f9f9;
	font-size: 28rpx;
}

.select-wrapper {
	flex: 1;
	position: relative;
}

.select-arrow {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: #999;
}

.upload-section {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.upload-label {
	width: 100px;
	font-size: 14px;
}

.upload-box {
	width: 120px;
	height: 120px;
	border: 1px dashed #e0e0e0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #999;
}

.upload-icon {
	font-size: 30px;
	margin-bottom: 5px;
}

.submit-button {
	margin: 20px 50px;
	padding: 10px;
	background-color: #1E88E5;
	color: white;
	text-align: center;
	border-radius: 30px;
	font-size: 16px;
	font-weight: bold;
}

/* 弹窗样式 */
.popup-content {
	background-color: white;
	border-radius: 16px 16px 0 0;
	padding-bottom: 30px;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	border-bottom: 1px solid #e0e0e0;
}

.popup-title {
	font-size: 16px;
	font-weight: bold;
}

.popup-close {
	font-size: 20px;
	color: #999;
}

.popup-body {
	max-height: 400px;
	overflow-y: auto;
}

.car-type-item {
	padding: 16px;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	font-size: 15px;
}
</style>